<template>
	<!-- 经营信息 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">经营信息</text></view>
					</template>
					<my-grid :list="list" :decimals="2" :col="2"></my-grid>
					<my-grid :list="list1" :decimals="2" :col="3" class="m-t-5"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">销售情况分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">利润分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">成本分析</text></view>
					</template>
					<up-subsection :list="[{ name: '本月' }, { name: '本年' }]" :current="current" mode="subsection" @change="fn3" class="m-b-5" />
					<my-grid :list="list2" :decimals="2" :col="1" type="lr"></my-grid>
					<my-grid :list="list3" :decimals="2" :col="2" class="m-t-5"></my-grid>
					<my-grid :list="list4" :decimals="2" :col="3" class="m-t-5"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">采购分析</text></view>
					</template>
					<my-grid :list="list5" :decimals="2" :col="3"></my-grid>
					<my-grid :list="list6" :decimals="2" :col="1" class="m-t-5" type="lr"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="6">
					<template #title>
						<view class="content-item-title"><text class="title-txt">营收分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="7">
					<template #title>
						<view class="content-item-title"><text class="title-txt">投资分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" ontouch :opts="opts3" :chartData="chartData3" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="8">
					<template #title>
						<view class="content-item-title"><text class="title-txt">资金看板</text></view>
					</template>
					<my-grid :list="list7" :decimals="2" :col="3" imgWidth="30%"></my-grid>
					<my-grid :list="list8" :decimals="2" :col="2" imgWidth="20%" class="m-t-5"></my-grid>
					<up-subsection :list="[{ name: '现金流入分析' }, { name: '现金流出分析' }]" :current="current1" mode="subsection" class="m-y-10" @change="fn8" />
					<view class="charts-box">
						<qiun-data-charts type="ring" ontouch :opts="opts4" :chartData="chartData4" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
import { getApiFabric, getByApiCode } from '@/api/customApi';
const showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7, 8]),
	collapse = ref(null);

/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************经营信息*************************************************/
let list = ref([
		{
			key: '年度投资总额',
			title: '年度投资总额',
			value: 0,
			unit: '亿元'
		},
		{
			key: '年度采购总额',
			title: '年度采购总额',
			value: 0,
			unit: '亿元'
		}
	]),
	list1 = ref([
		{
			key: '年度成本费用',
			title: '年度成本综合',
			value: 0,
			unit: '亿元'
		},
		{
			key: '年度销售额',
			title: '年度销售收入',
			value: 0,
			unit: '亿元'
		},
		{
			key: '年度利润总额',
			title: '年度利润总额',
			value: 0,
			unit: '亿元'
		}
	]);

function fn() {
	getByApiCode({
		apiCode: 'NIANDUCAIGOUZONGETONGJI',
		propertyMapping: {
			amount: 'amount',
			item: 'item'
		}
	}).then((res) => {
		list.value[1].value = res.data[0].amount;
	});

	getByApiCode({
		apiCode: 'NIANDUTOUZIZONGE',
		propertyMapping: {
			amount: 'amount',
			item: 'item'
		}
	}).then((res) => {
		list.value[0].value = res.data[0].amount;
	});

	getByApiCode({
		apiCode: 'NIANDULIRUNZONGETONGJI',
		propertyMapping: {
			amount: 'amount',
			item: 'item'
		}
	}).then((res) => {
		list1.value[2].value = res.data[0].amount;
	});

	getByApiCode({
		apiCode: 'NIANDUXIAOSHOUZONGETONGJI',
		propertyMapping: {
			amount: 'amount',
			item: 'item'
		}
	}).then((res) => {
		list1.value[1].value = res.data[0].amount;
	});

	getByApiCode({
		apiCode: 'NIANDUCHENGBENZONGETONGJI',
		propertyMapping: {
			amount: 'amount',
			item: 'item'
		}
	}).then((res) => {
		list1.value[0].value = res.data[0].amount;
	});
}

/**************************************销售情况分析*************************************************/
const chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 12,
			itemGap: 10
		},
		xAxis: {
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万元',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	};

function fn1() {
	getApiFabric({
		apiCode: '0f44cd98-8004-49b7-8375-62b73e5fe6df',
		propertyMapping: {
			x: 'month',
			y1: 'predictVal',
			z1: 'actualVal'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.z1);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData.value = {
			categories: resData.categories,
			series: [
				{
					name: '预测',
					data: resData.series1
				},
				{
					name: '实际',
					data: resData.series2
				}
			]
		};
	});
}

/**************************************利润分析*************************************************/
const chartData1 = ref({}),
	opts1 = {
		...opts,
		extra: {
			area: {
				type: 'straight',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

function fn2() {
	getApiFabric({
		apiCode: '4b55d837-86b9-4f86-a614-68ce0d65afee',
		propertyMapping: {
			x: 'month',
			y1: 'predictVal',
			z1: 'actualVal'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.z1);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData1.value = {
			categories: resData.categories,
			series: [
				{
					name: '预测',
					data: resData.series1
				},
				{
					name: '实际',
					data: resData.series2
				}
			]
		};
	});
}

/**************************************成本分析*************************************************/
const current = ref(0);
let list2 = ref([
		{
			title: '本月成本累计',
			value: 0,
			unit: '万'
		}
	]),
	list3 = ref([
		{
			title: '营业成本总额',
			value: 0,
			unit: '万'
		},
		{
			title: '三项费用及税金',
			value: 0,
			unit: '万'
		}
	]),
	list4 = ref([
		{
			title: '管理费用',
			value: 0,
			unit: '万'
		},
		{
			title: '归集研发费用',
			value: 0,
			unit: '万'
		},
		{
			title: '电费',
			value: 0,
			unit: '万'
		}
	]);
function fn3(index = 0) {
	current.value = index;
	getByApiCode({
		apiCode: current.value == 0 ? 'YUEDUCHENGBENFENXITONGJI' : 'NIANDUCHENGBENFENXTONGJII',
		propertyMapping: {
			s: 'item',
			y: 'amount'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list3.value.forEach((item) => {
			item.value = data[item.title];
		});
		list4.value.forEach((item) => {
			item.value = data[item.title];
		});
	});

	getByApiCode({
		apiCode: current.value == 0 ? 'YUEDUCHENGBENZONGETONGJI' : 'NIANDUCHENGBENZONGELEIJI',
		propertyMapping: {
			item: 'item',
			amounttotal: 'amounttotal'
		}
	}).then((res) => {
		list2.value[0].value = res.data[0].amounttotal;
		current.value == 0 ? (list2.value[0].title = '本月成本累计') : (list2.value[0].title = '本年成本累计');
	});
}

/**************************************采购分析*************************************************/
let list5 = ref([
		{
			title: '采购次数',
			value: 0,
			unit: '次'
		},
		{
			title: '品类数量',
			value: 0,
			unit: '个'
		},
		{
			title: '采购金额',
			value: 0,
			unit: '万'
		}
	]),
	list6 = ref([
		{
			title: '货物类',
			value: 0,
			unit: '万'
		},
		{
			title: '工程类',
			value: 0,
			unit: '万'
		},
		{
			title: '服务类',
			value: 0,
			unit: '万'
		}
	]);
function fn4() {
	getByApiCode({
		apiCode: 'CAIGOUFENXIDUOZHI',
		propertyMapping: {
			s: 'item',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list5.value.forEach((item) => {
			item.value = data[item.title];
		});
	});
	getByApiCode({
		apiCode: 'CAIGOUFENXIPAIHANG',
		propertyMapping: {
			s: 'item',
			y: 'amount'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list6.value.forEach((item) => {
			item.value = data[item.title];
		});
	});
}

/**************************************营收分析*************************************************/
const chartData2 = ref({}),
	opts2 = {
		...opts,
		legend: {
			show: false
		}
	};
function fn5() {
	getByApiCode({
		apiCode: 'yingshoujiegoufenxi',
		propertyMapping: {
			x: 'sj',
			y1: 'yssj'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				return prev;
			},
			{
				categories: [],
				series1: []
			}
		);
		chartData2.value = {
			categories: resData.categories,
			series: [
				{
					name: '',
					data: resData.series1
				}
			]
		};
	});
}

/**************************************投资分析*************************************************/
const chartData3 = ref({}),
	opts3 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 0,
			fontSize: 10,
			itemGap: 10
		},
		title: {
			name: 0,
			fontSize: 18,
			color: '#000'
		},
		subtitle: {
			name: '投资总额',
			fontSize: 14,
			color: '#000'
		},
		extra: {
			ring: {
				ringWidth: 30,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};
function fn6() {
	getByApiCode({
		apiCode: 'TOUZIFENXIBINGTU',
		propertyMapping: {
			s: 'item',
			y: 'amount'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts3.title.name = total + '亿元';
		chartData3.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/**************************************资金看板*************************************************/
let list7 = ref([
		{
			title: '现金总流入',
			value: 0,
			unit: '亿元',
			img: 'index/xjzlr.png'
		},
		{
			title: '现金总流出',
			value: 0,
			unit: '亿元',
			img: 'index/xjzlc.png'
		},
		{
			title: '现金净流入',
			value: 0,
			unit: '亿元',
			img: 'index/xjjlr.png'
		}
	]),
	list8 = ref([
		{
			title: '初期现金净值',
			value: 0,
			unit: '亿元',
			img: 'index/xjjz.png'
		},
		{
			title: '末期现金净值',
			value: 0,
			unit: '亿元',
			img: 'index/xjjz.png'
		}
	]);
function fn7() {
	getByApiCode({
		apiCode: 'ZIJINKANBANTONGJI',
		propertyMapping: {
			s: 'item',
			y: 'val'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.key = item.s;
			item.val = item.y;
			delete item.s;
			delete item.y;
		});
		const data = ArrayToObj(res.data);
		list7.value.forEach((item) => {
			item.value = data[item.title];
		});
		list8.value.forEach((item) => {
			item.value = data[item.title];
		});
		nextTick(() => {
			collapse.value.init();
		});
	});
}

const current1 = ref(0);
const chartData4 = ref({}),
	opts4 = {
		...opts3,
		legend: {
			show: false
		},
		title: {
			name: 0,
			fontSize: 23,
			color: '#000'
		},
		subtitle: false
	};
function fn8(index = 0) {
	current1.value = index;
	let data = {
			apiCode: 'jingyingguanlixianjinliurugoucheng',
			propertyMapping: {
				s: 'sj',
				y: 'zjlr'
			}
		},
		data1 = {
			apiCode: 'xianjinliuchugoucheng',
			propertyMapping: {
				s: 'sj',
				y: 'zjlc'
			}
		};
	getByApiCode(current1.value == 0 ? data : data1).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts4.title.name = total;
		chartData4.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
		nextTick(() => {
			collapse.value.init();
		});
	});
}

function getServerData(refresh) {
	Promise.all([fn(), fn1(), fn2(), fn3(), fn4(), fn5(), fn6(), fn7(), fn8()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss"></style>
